<template>
  <div id="temp">
    <!-- 顶部导航 -->
    <p class="common_style">
      <span class="greenStyle">讲师管理</span> / 讲师列表</p>

    <!-- 添加讲师 -->
    <div class="add_teacher ar common_style">
      <router-link to="/teacher/add_teacher">
        <button type="button" class="btn btn-success">添加讲师</button>
      </router-link>
    </div>

    <!-- 讲师列表 -->
    <div class="teacher_list common_style">

      <!-- 搜索功能 -->
      <form>
        <input type="text" class="form-control input-sm">
        <button type="button" class="btn btn-success btn-sm">搜索</button>
      </form>

      <!-- 列表 -->
      <table class="table table-hover table-bordered table-striped">
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>昵称</th>
          <th>性别</th>
          <th>手机号码</th>
          <th>出生日期</th>
          <th>邮箱</th>
          <th>入职日期</th>
          <th>操作</th>
        </tr>
        <tbody>
          <tr>
            <td>1</td>
            <td>老虎</td>
            <td>妮儿</td>
            <td>女</td>
            <td>123456789</td>
            <td>1996-05-05</td>
            <td>carmole@163.com</td>
            <td>2017-8-20</td>
            <td>
              <button type="button" class="btn btn-info btn-xs" @click="showTeacherInfo">查看</button>
              <router-link to="/teacher/edit_teacher">
                <button type="button" class="btn btn-info btn-xs">编辑</button>
              </router-link>
              <button type="button" class="btn btn-warning btn-xs" @click="changeText" v-text="isUsedStr"></button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="teacher_info">
      <div class="teacher_content">
        <h3>讲师信息<span class="fr" @click="hideTeacherInfo">×</span></h3>
        <div class="main_info">
          <table class="table table-hover table-bordered">
            <tr>
              <th>姓名：</th>
              <td>老虎</td>
              <th>职位： </th>
              <td>讲师</td>
              <td rowspan="4">
                <img src="../../../statics/imgs/userdefault.png" width=200 height=150 alt="">
              </td>
            </tr>
            <tr>
              <th>花名：</th>
              <td>老虎</td>
              <th>出生日期： </th>
              <td>1996-05-05</td>
            </tr>
            <tr>
              <th>性别：</th>
              <td>女</td>
              <th>入职日期： </th>
              <td>2017-08-15</td>
            </tr>
            <tr>
              <th>手机号码：</th>
              <td>15891448151</td>
              <th>邮箱： </th>
              <td>carmole@163.com</td>
            </tr>
            <tr>
              <td>籍贯：</td>
              <td colspan="4">陕西省安康市大同镇</td>
            </tr>
            <tr height="188">
                <td colspan="5"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isUsedStr: "注销",
        isUsed: true
      }
    },
    mounted() {
      //页面渲染的时候执行一次遮罩层隐藏
       $(".teacher_content").slideUp(0, function () {
        $(".teacher_info").hide();
      }); 
    },
    methods: {

      //控制是否启用该讲师
      changeText() {
        this.isUsed = !this.isUsed;
        this.isUsedStr = this.isUsed ? "注销" : "启用"
      },

      //显示遮罩层
      showTeacherInfo() {
        $(".teacher_info").show(0, function () {
          $(".teacher_content").slideDown(500)
        });
      },

      //隐藏遮罩层
      hideTeacherInfo() {
        $(".teacher_content").slideUp(500, function () {
          $(".teacher_info").hide();
        });
      }
    }
  }
</script>
<style scoped lang="less">
  #temp {
    padding: 15px;
    .common_style {
      background-color: #fff;
      border: 1px solid #dedede;
      border-radius: 5px;
    }
    >p {
      padding-left: 1em;
      line-height: 40px;
    }
    .greenStyle {
      color: #337ab7;
    }
    .add_teacher {
      width: 100%;
      height: 70px;
      margin: 20px 0;
      line-height: 70px;
      padding: 0 20px 0 0;
    }
    .teacher_list {
      form {
        margin: 20px;
        input {
          width: 150px;
          display: inline-block;
        }
      }
      .table {
        tr,
        td,
        th {
          text-align: center;
          padding: 8px 0;
          border: 1px solid #ddd;
        }
      }
    }
    .teacher_info {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .3);
      position: fixed;
      top: 0;
      left: 0;
    }
    .teacher_content {
      width: 800px;
      height: 500px;
      margin: 100px auto;
      background-color: #fff;
      h3 {
        background-color: #f5f5f5;
        line-height: 50px;
        padding: 0 20px;
        border-bottom: 1px solid #ddd;
        span {
          cursor: pointer;
          font-size: 30px;
        }
      }
      .main_info {
        padding: 20px;
        width: 100%;
        table {
          width: 100%;
          tr,
          td,
          th {
            text-align: center;
            padding: 8px 0;
            border: 1px solid #ddd;
          }
        }
      }
    }
  }
</style>